<template>
	<div class="wrapper">
		<el-row :gutter="20">
			<el-col :span="8" :offset="0">
				<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
					<div slot="header">
						<span>分析项目编号：{{ data.pro_id }}</span>
					</div>
					<ul class="ul-box">
						<li class="title"><span>数据类型</span>: {{ data.type }}</li>
						<li class="title"><span>分析对象</span>: {{ data.target }}</li>
						<li v-if="data.reg_addr"><span>注册地点</span>: {{ getCountryName(data.reg_addr) }}</li>
						<li v-if="data.reg_time"><span>注册时间</span>: {{ data.reg_time }}</li>
					</ul>
				</el-card>
			</el-col>
			<el-col :span="16" :offset="0">
				<el-card shadow="hover" class="box-card show-tag" :body-style="{ padding: '20px' }">
					<el-row :gutter="20">
						<el-col :span="12" :offset="0">
							<span>情报标签:</span>
							<el-tag type="info" v-for="(item, i) in data.tag" :key="i" size="normal" effect="plain">
								{{ item }}</el-tag>
						</el-col>
						<el-col :span="12" :offset="0">
							<span>判断结果:</span>
							<el-tag :type="flag == 'normal' ? 'success' : 'danger'" size="normal" effect="dark">
								<i
									:class="flag == 'normal' ? 'el-icon-check' : 'el-icon-close'"></i>{{ getZH(this.data.label) }}
							</el-tag>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" :offset="0">
							<span>所属组织:</span>
							<el-tag type="info" v-for="(item, i) in data.organization" :key="i" size="normal"
								effect="plain">{{ item }}</el-tag>
						</el-col>
						<el-col :span="12" :offset="0">
							<span>创建时间:</span> <span>{{ data.create_time }}</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" :offset="0">
							<span>最后更新:</span> <span>{{ data.update_time }}</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8" :offset="0">
				<el-card shadow="hover" class="box-card"
					:body-style="{ height: '600px', padding: '20px', overflow: 'auto' }">
					<div slot="header">
						<span>相关指标</span>
					</div>
					<!-- card body -->
					<!-- <ul class="ul-box">
						<li v-for="(item, i) in data.nodes" :key="i">
							<el-button size="default" :loading="loading" @click="goSearch(item)">
								<span>{{ item }}</span></el-button
							>
						</li>
					</ul> -->
					<el-table :data="tableData" border stripe>
						<el-table-column label="序号" width="80">
							<template slot-scope="scope">
								{{ scope.$index + 1 }}
							</template>
						</el-table-column>

						<el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label"
							:width="col.width" :sortable="col.sortable"> </el-table-column>
						<el-table-column fixed="right" label="操作" width="80">
							<template slot-scope="scope">
								<el-button type="text" :loading="btnLoading" size="small" @click="goSearch(scope.row)">
									查看详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="16" :offset="0">
				<el-card shadow="hover" class="box-card"
					:body-style="{ height: '600px', padding: '20px', overflow: 'auto' }">
					<div slot="header">
						<span>关联分析图</span>
					</div>
					<!-- card body -->
					<div style="border:0px">
						<div style="">
							<iframe :src="data.graph" width="960" height="1200px" scrolling="yes"></iframe>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import mixin from '@/utils/country'
	export default {
		components: {},
		mixins: [mixin],
		props: {
			data: Object,
			id: String
		},
		watch: {
			data: function(val) {
				this.getTableData()
			},
		},

		data() {
			return {
				flag: this.data.label,
				loading: false,
				btnLoading: false,
				// tableData: [],
				resultList: [{
						value: 'malicious',
						label: '恶意的',
					},
					{
						value: 'normal',
						label: '正常的',
					},
					{
						value: 'suspicious',
						label: '可疑的',
					},
				],
				columns: [{
						label: '节点关联',
						id: 'value'
					},
					{
						label: '关联次数',
						id: 'count',
						sortable: true,
						width: 110
					},
				],
			}
		},
		watch: {},
		computed: {},
		methods: {
			getZH(p) {
				let tmp = '-'
				this.resultList.forEach((item) => {
					if (item.value == p) {
						tmp = item.label
					}
				})
				return tmp
			},
			goSearch(p) {
				p = p.value
				this.loading = true
				this.btnLoading = true
				let json = {
					value: p,
				}
				this.$api
					.postSearchNext2(json)
					.then((res) => {
						if (res.status === 200) {
							// 第一次查询
							if (res.data.msg) {
								this.$message.success(res.data.msg)
								this.$message.success('请在威胁情报历史记录里查看处理状态')
							} else {
								// 重复查询
								let data = res.data
								// this.id = data.iden
								this.$emit('update', data.iden)
								const {
									href
								} = this.$router.resolve({
									path: `clueSearchDetails`,
									query: {
										id: data.iden
									},
								});
								window.open(href, '_blank');
								// this.$router.push({
								// 	path: '/clueSearchDetails',
								// 	query: {
								// 		id: data.iden,
								// 	},
								// })
							}
							this.loading = false
							this.btnLoading = false
						}
					})
					.finally(() => {
						this.loading = false
						this.btnLoading = false
					})
			},
			getTableData() {},
		},
		computed: {
			tableData: function() {
				let tempArr = this.data.node_degree
				let arr = []

				if (tempArr) {
					for (const key in tempArr) {
						let json = {
							value: '',
							count: 0,
						}
						if (Object.hasOwnProperty.call(tempArr, key)) {
							const element = tempArr[key]
							json.value = key
							json.count = element
						}
						arr.push(json)
					}
				}
				return arr
			},
		},
	}
</script>
<style lang="less" scoped>
	.wrapper {
		.box-card {
			min-height: 238px;
		}

		.ul-box {
			text-decoration: none;
			list-style: none;

			span {
				margin-right: 5px;
			}

			li {
				padding: 4px 0;
				font-size: 18px;
			}

			.title {
				font-size: 20px;
				font-weight: bolder;
			}
		}

		.show-tag {
			.el-row {
				padding: 15px;
			}

			span {
				font-size: 16px;
				margin-right: 6px;
			}

			.el-tag .el-icon-close {
				right: -1px;
			}
		}
	}
</style>
